<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-12-02 13:13:25
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2024-01-04 12:08:51
 * @FilePath: \backstage - 副本\src\views\aa.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="department" id="department">
    <!-- 右侧 -->
    <div class="department_right">
      <div class="app-container-btn">
        <el-button @click="goBack">返回</el-button>
      </div>

      <!-- 表格 -->
      <div
        class="text_table multistageHeader GroutExceedDataFirstLevel TensionRealTimeFirstLevel"
        style="height: 100%"
      >
        <div class="dialogBodyBox" style="position: relative; height: 61%">
          <tableData
            :page="materialGetList.page"
            :pageSize="materialGetList.pageSize"
            height="100%"
            :config="material_config"
            :dataList="materialData"
            statusType="3"
            :level="level"
            :earlyWarning="earlyWarning"
            :currentRow="false"
            :stripe="false"
          />
          <PaginationS
            :info="queryCriteriaDatas_M"
            :total="queryCriteriaDatas_M.total"
            :pageNum.sync="materialGetList.page"
            :limit.sync="materialGetList.pageSize"
            @pagination="processDetailsFun(materialGetList)"
          />
        </div>

        <div class="dialogBodyBox" style="height: 39%">
          <div class="tab">
            <div
              v-for="(data, index) in typeData"
              :key="data.value"
              @click="changeType($event, index)"
            >
              <div
                class="btn"
                :style="{
                  color:
                    data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                  background: data.show === true ? '#E0EFFF' : '#fff',
                }"
              >
                {{ data.text }}
              </div>
            </div>
          </div>

          <div class="charts" v-if="typeData[0].show">
            <!-- 浆量-->
            <thickLiquidCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="thickLiquidData"
            >
            </thickLiquidCharts>
          </div>

          <div class="charts" v-if="typeData[1].show">
            <!-- 压力 -->
            <pressureCharts
              v-loading="chartsLoading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.3)"
              :time1="this.value2[0]"
              :time2="this.value2[1]"
              :commonData="pressureData"
            >
            </pressureCharts>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
// import vDatePicker from "@/components/public/v-DatePicker";

import TableData from "@/components/public/el-tables"; //主页面列表
import PaginationS from "@/components/TensionAndGrout/TensionManage/TensionRealTime/el-pagination"; //弹框分页

import thickLiquidCharts from "@/components/TensionAndGrout/TensionManage/GroutManage/thickLiquidCharts"; //浆量
import pressureCharts from "@/components/TensionAndGrout/TensionManage/GroutManage/pressureCharts"; //压力

import formJs from "./regexDetail.js"; //新增弹框配置项
import {
  getGroutingProcessDetailLists, //过程数据--详情
} from "@/api/request.js";
import { statusTypes1 } from "@/utils/config"; //配置项
export default {
  name: "GroutExceedDatasecondLevel",
  data() {
    return {
      name: "GroutExceedDatasecondLevel", //按钮配置页面代号
      timeDuring: "", //张拉时间
      editLoading: false,
      rowInfo: null, //列表当前行信息

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

      AduitUser: null, //审核流程
      formObj: formJs.formObj, //新增编辑配置参数
      handleObj: formJs.handleObjs, //新增编辑配置参数
      handleObjs1: formJs.handleObjs1,
      processObj: formJs.processObjs, //一级审核
      processObj1: formJs.processObjs1, //一级审核
      examineObjs: formJs.examineObjs, //二级审核
      examineObjs1: formJs.examineObjs1, //二级审核
      levelThree: formJs.levelThrees, //三级审核
      levelThree1: formJs.levelThree1, //三级审核
      // levelFourth: formJs.levelFourths, //四级审核
      // levelFourth1: formJs.levelFourth1, //四级审核
      formData: {}, //新增编辑向后台传递对象
      handleData: {
        fCompanyid: "", // 施工标段id
        fId: "", // 申请单fid //为空判断为新增
        fParentid: "", // 对应的超标记录fid
        fWarningcontent: "", // 预警内容
        fReason: "", // 问题原因
        fHandleway: "", // 处理方式
        fHandleresult: "", // 处理结果
        fHandledate: "",
        fHandledates: "", // 处理日期
        fHandleusername: "", // 处理人名称
        fHandlefile: "", // 处理附件id
        fFirstcheckresult: "", // 一级审核处理结果
        fFirstcheckopinion: "", // 一级审核处理意见
        fFirstcheckusername: "", // 一级审核处理人name
        fFirstcheckdates: "", // 一级审核处理日期
        fSecondcheckresult: "", // 二级审核处理结果
        fSecondcheckopinion: "", // 二级审核处理意见
        fSecondcheckusername: "", // 二级审核处理人name
        fSecondcheckdates: "", // 二级审核处理日期
        fThirdcheckresult: "", // 三级审核处理结果
        fThirdcheckopinion: "", // 三级审核处理意见
        fThirdcheckusername: "", // 三级审核处理人name
        fThirdcheckdates: "", // 三级审核处理日期
        fFourthcheckresult: "", // 四级审核处理结果
        fFourthcheckopinion: "", // 四级审核处理意见
        fFourthcheckusername: "", // 四级审核处理人name
        fFourthcheckdates: "", // 四级审核处理日期

        aduitStatus: null, //保存状态
        userId: "", // 当前登录人id
        userName: "", // 当前登录人姓名
        recordfiles: [], // 删除文件id集合
      },
      // handleData1: formJs.handleData,
      navigatepageNums: null, //是否显示分页
      queryCriteriaData: {}, //分页
      djDataList: formJs.djDataList,
      CloseoperationDataList: formJs.closeList,
      bhzDataList: [], //拌合站
      bhjDataList: [], //拌合机

      value2: "", //主页面日期筛选绑定值
      // json_fields: {
      //   //导出Excel表格的表头设置
      //   生产任务单号: "fProduceTaskNumber",
      //   项目名称: "fProjectName",
      //   工程名称: "fEngineeringName",
      //   工程部位: "fEngineeringPartName",
      //   实际方量: "fActualCalculation",
      //   强度等级: "fStrengthGrade",
      //   状态: "fWarningLevel",
      //   出料时间: "dischargeDates",
      //   上传时间: "fDischargeDates",
      //   闭合状态: "fCloseStatus", //  待处理/处理中/已闭合
      //   闭合操作: "fCloseOperation", //   待处理/审核中/已闭合
      // },
      xlsxName: null,
      // 列表配置项
      table_config: formJs.cbtable_config,

      tableData: [], //表格列表数据列表
      tableDatas: [],

      highlightBd: true, //左侧机构树停留背景色

      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级按钮
      showName: "未选择公司",
      dialogHeight: "470px", //弹框高度
      fId: null, //点击当前列表数据fId
      checkStatus: null, //闭合状态
      // closeOperation:null, //闭合状态
      listLoading: false, //列表数据加载loading
      loadingEditDialog: false, //弹框loading
      dialogEditVisible: false, //新增弹框是否显示
      // 列表给后端传参
      getList: {
        fCompanyid: "", // 施工标段id，不为空
        startDates: "", // 开始时间
        endDates: "", // 截至时间
        stationId: "", // 梁场id
        machineId: "", // 张拉机id
        warningLevel: "", // 预警等级
        fCloseoperation: "", // 闭合状态
        keyWord: "", //  模糊条件
        page: 1, // 当前页数
        pageSize: 20, // 每页显示条数
      },
      companyTree: "", //所有数据
      treeData: [], //左侧树状图数据

      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      checkData: [], //树状图默认选中id
      userInfo: {}, //登录用户
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
        text: null,
      },
      activeNames: ["0"],
      handNum: false, //闭合申请单
      firstNum: false, //一级审核
      secondNum: false, //二级审核
      threeLevel: false, //三级审核显示
      // fourLevel: false, //四级审核显示
      btnShow: true, //保存按钮是否显示
      fSourcefileList: [],
      dialogTitle: "编辑",

      // 查看--过程数据

      // 过程数据-详情
      dialogEditVisibleCon: false,
      loadingEditDialogCon: false,
      materialRow: null, //选择过程数据当前行数据
      materialGetList: {
        namberId: "", // 孔号id
        page: 1, // 当前页码
        pageSize: 15, // 每页显示条数
      }, //调取过程数据详情接口传参
      materialData: [], //列表

      queryCriteriaDatas_M: {}, //过程数据-详情-分页
      material_config: formJs.material_config,
      earlyWarning: [], //预警标准
      typeData: [
        { text: "浆量", show: true },
        { text: "压力", show: false },
      ],
      thickLiquidData: [], //浆量
      pressureData: [], //压力
      level: [],
      chartsLoading: false,

      // 过程数据-详情
      // 查看--过程数据
    };
  },
  components: {
    TableData, //主页面列表
    PaginationS,
    pressureCharts, //压力
    thickLiquidCharts, //浆量
  },
  mounted() {
    // this.userInfo = JSON.parse(sessionStorage.getItem("GxEmbedded_userInfo"));

    this.processDetailsFun();
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    btnRole(name) {
      // 按钮权限
      var btnList = [];
      var ModuleList = JSON.parse(
        sessionStorage.getItem("GxEmbedded_ModuleList")
      );
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        // this.yj_view = btnStr.includes("yj_view");
      } else {
        // this.yj_view = true;
      }
    },
    // 过程数据----详情（2级详情）
    processDetailsFun(data) {
      var materialGetList = {
        namberId: this.$route.query.data, // 孔号id
        page: this.materialGetList.page, // 当前页码
        pageSize: this.materialGetList.pageSize, // 每页显示条数
      };
      getGroutingProcessDetailLists(materialGetList)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;

            // that.dialogEditVisibleCon = true;
            that.materialData = res.data.pageInfo.list;
            that.queryCriteriaDatas_M = res.data.pageInfo; //分页信息

            that.thickLiquidData = [
              res.data.line.holdingtimeList,
              res.data.line.feededamountList,
              res.data.line.outamountList,
            ]; //浆量--图表数据

            that.pressureData = [
              res.data.line.holdingtimeList,
              res.data.line.feededpressureList,
              res.data.line.outpressureList,
            ]; //压力--图表数据
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
      // } else {
      //     return this.$message.error("请先选择需要查看的数据");
      // }
    },
    // 点击图表切换
    changeType(e, index) {
      for (let i in this.typeData) {
        if (parseFloat(i) === index) {
          this.typeData[i].show = true;
        } else {
          this.typeData[i].show = false;
        }
      }

      this.typeDataNum = index;
      // this.yj_searchForm(this.getList);
    },
    // 查看
  },
};
</script>
  
<style scoped lang='less'>
.GroutExceedDataFirstLevel {
  display: flex;
  flex-direction: column;
}

.multistageHeader {
  flex: 1;
}

.TensionRealTime {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

.baseTitle {
  /* border: 1px solid #0c204d; */
  border-bottom: 1px solid #0c204d;

  height: 30px;
  line-height: 30px;
  position: relative;
  padding-left: 15px;
}

.baseTitle::after {
  display: block;
  content: "";
  height: 30px;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  background: #0c204d;
}

.TensionAndGrout_dialog .dialogBody {
  padding: 3px 20px;
  height: 98% !important;
  /* overflow-y: auto; */
}

// .dialogBodyBox {
//     width: 100%;
.dialogBodyBox {
  display: flex;
  flex-direction: column;
}

.tab {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #e4e7ed;
  padding: 0 0.16rem;

  .btn {
    margin-top: 4px;
    // margin-right: 16px;
    width: 80px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
}

.charts {
  height: calc(100% - 30px);
}

// }

.mechanism_dialogS /deep/ .el-table__body-wrapper {
  height: calc(100% - 84px);
  overflow-y: auto;
}

.mechanism_dialogS /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  z-index: 99999999 !important;
}

.common .block {
  bottom: 5px !important;
}
</style>